<template>
  <div class="reservation">
    <div class="top">
      <Input placeholder="请输入用户名/手机号" @search="handleSearch" />
      <el-form label-width="120px" class="d-flex">
        <el-form-item label="状态筛选:">
          <el-select v-model="value" placeholder="请选择" @change="checkData">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="tab" style="margin-left:50px;">
        <el-button @click="exportClick">导出EXCEL</el-button>
      </div>
    </div>
    <div class="bottom">
      <el-table :data="tableData" style="width: 100%" :height="height">
        <el-table-column prop="date" label="用户" width="180">
          <template slot-scope="scope">
            <div>
              <el-avatar :size="60" :src="scope.row.portrait_url" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="180" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="car_no" label="车牌号" />
        <el-table-column prop="car_img" label="行驶证">
          <template slot-scope="scope">
            <el-image
              @click="showViewerModel(scope.row.car_img)"
              style="width: 40px; height: 40px"
              :src="scope.row.car_img"
            />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="状态">
          <template slot-scope="scope">
            <div>{{scope.row.is_write == 0 ? '未录入' : '已录入'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250" fixed="right">
          <template slot-scope="scope">
            <div>
              <span class="col-blue" @click="edit(scope.row.id)">修改车牌号</span>
              <span
                class="col-red"
                v-show="scope.row.is_write == 0"
                @click="entryData(scope.row)"
              >录入</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination class="pagination" :total="total" @nextPage="handleNextPage" />
    </div>
    <Dialog ref="licenseDialog" title="车牌号修改" @closeDialog="handleClose">
      <el-form label-width="80px">
        <el-form-item label="车牌号">
          <el-input v-model="carNum" size="meduim" placeholder="请输入车牌号" style="width: 300px" />
        </el-form-item>
      </el-form>
    </Dialog>
    <el-dialog :visible.sync="showViewer">
      <img style="display:block;margin:0 auto;max-width:100%;" :src="viewImg" alt />
    </el-dialog>
  </div>
</template>
<script>
import { getLicenseList, uploadTicket } from "@/api/http/designer";
import Input from "@/common/input";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
import Dialog from "@/common/dialog";
export default {
  components: {
    Input,
    Pagination,
    Dialog
  },
  mixins: [Resize],
  data() {
    return {
      showViewer: false,
      viewImg: "",
      carNum: "",
      query: "",
      editId: 0,
      total: 0,
      page: 1,
      defaultHeight: 280,
      options: [
        {
          value: "0",
          label: "未录入"
        },
        {
          value: "1",
          label: "已录入"
        },
        {
          value: "",
          label: "全部"
        }
      ],
      tableData: [],
      value: ""
    };
  },
  created() {
    this.getLicenseList();
  },
  methods: {
    // 查看大图
    showViewerModel(img){
      this.showViewer = true;
      this.viewImg = img;
    },
    // 导出excel
    exportClick() {
      window.location.href = `http://ddsc.izhixiu.cn/api/back/designer/exportTicket?keywords=${this.query}`;
    },
    // 状态筛选
    checkData() {
      console.log(this.value, "---this.value");
      this.getLicenseList();
    },
    // 录入录出
    entryData(row) {
      this.editId = row.id;
      var params = {
        id: this.editId,
        is_write: 1
      };
      this.uploadTicket(params);
    },
    // 修改车牌号
    handleClose() {
      this.$refs.licenseDialog.show();
      if (!this.carNum) {
        this.$message("请填写车牌号");
        return;
      }
      var params = {
        id: this.editId,
        car_no: this.carNum
      };
      this.uploadTicket(params, 2);
    },
    uploadTicket(params, i) {
      uploadTicket(params).then(res => {
        // console.log(res, "---res");
        if (res.code == 200) {
          if (i == 2) {
            this.$message.success("修改成功");
            this.$refs.licenseDialog.cancel();
          } else {
            this.$message.success("录入成功");
          }
          this.getLicenseList();
        }
      });
    },
    handleNextPage(page) {
      this.page = page;
      this.getLicenseList();
    },
    // 获取停车管理数据
    getLicenseList() {
      getLicenseList({
        page: this.page,
        keywords: this.query,
        status: this.value
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    edit(id) {
      this.$refs.licenseDialog.show();
      this.editId = id;
    },
    handleSearch(query) {
      this.query = query;
      this.getLicenseList();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
@import "@/styles/color.scss";
.top {
  display: flex;
  align-items: center;
  .el-form-item {
    margin: 0;
  }
}
.bottom {
  margin-top: 20px;
}
.d-flex {
  display: flex;
  align-items: center;
}
</style>
